import React from "react";
import { Card, Row, Col } from "antd";
import "./index.less";

const imgs = [
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536252733998&di=b956f8ee0621089d59e24f2238004915&imgtype=0&src=http%3A%2F%2Fimage.jijidown.com%2Fv1%2Fimage%3Fav%3D12374407%26url%3Dhttps%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fd8356c84f0057f1dad1d2e9618cc203c0edc4c4f.jpg%26sign%3DDC920ECA582776F29BAE9DCCBA4E04C7",
  "https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1536252733998&di=b956f8ee0621089d59e24f2238004915&imgtype=0&src=http%3A%2F%2Fimage.jijidown.com%2Fv1%2Fimage%3Fav%3D12374407%26url%3Dhttps%3A%2F%2Fi0.hdslb.com%2Fbfs%2Farchive%2Fd8356c84f0057f1dad1d2e9618cc203c0edc4c4f.jpg%26sign%3DDC920ECA582776F29BAE9DCCBA4E04C7",
];

export default () => (
  <div className="demo">
    <div style={{
      transform: "translateX(-50%) translateY(-50%)", position: "absolute", left: "50%", top: "50%", margin: 0,
    }}
    >
      <h1>欢迎来到大后台</h1>
      <Row gutter={15} type="flex" align="top">
        {
          imgs.map((img, index) => (
            <Col span={12}>
              <Card
                style={{ width: 300 }}
                cover={<img alt="example" src={img} className="example" />}
              >
                {`模块${index + 1}`}
              </Card>
            </Col>
          ))
        }
      </Row>
    </div>
  </div>
);
